<template>
	<view :class="['container',$store.state.theme.themeType]"
		:style="{'--color1':$store.state.theme.color1,'--color2':$store.state.theme.color2,'background-color': background_color,'--nav_color':$store.state.theme.navColor,'--background':background_color}">
		<!-- <view v-if="showmulu" class="mask" @click="showmulu=false">
		</view> -->
		<uni-popup class="mulu" type="left" ref="mulu" :backgroundColor="$store.state.theme.navColor"
			@change="e=>{showmulu=e.show}">
			<uni-segmented-control :current="mulu_current" :values="['目录','书签']"
				@clickItem="e=>{mulu_current=e.currentIndex}" styleType="text" activeColor="#007aff">
			</uni-segmented-control>
			<view v-show="mulu_current === 0"
				style="height: 40px;font-size: 24rpx;display: flex;align-items: center;justify-content: center;">
				<text @click="reverse=!reverse;chapter_y=0" class="reverse">{{reverse?'顺序':'倒序'}}</text>
			</view>
			<scroll-view v-show="mulu_current === 0" :show-scrollbar="true" @scroll="chapterScroll"
				:scroll-top="chapter_y" class="scroll-mulu" scroll-y="true"
				:style="{height:`calc(100vh - 76px - ${RpxToPx(statusBarHeight)}px)`,'--topBlankFill':topBlankFill+'px','--bottomBlankFill':bottomBlankFill+'px'}">
				<view :class="['chapter-name',currentchapters==item.num?'active':null]"
					v-for="(item,index) in showDataList" :key="item.num" @click="selectChapter(item.num)">
					<view class="name">
						{{item.name}}
						<!-- -{{currentchapters}}-{{item.num}} -->
					</view>
					<view :class="['iconfont',item.content?'icon-chenggong':'icon-yunxiazai_o']">
					</view>
				</view>
			</scroll-view>
			<scroll-view v-show="mulu_current === 1" :show-scrollbar="true" class="scroll-mulu" scroll-y="true"
				:style="{height:`calc(100vh - 36px - ${RpxToPx(statusBarHeight)}px)`,'--topBlankFill':0+'px','--bottomBlankFill':0+'px'}">
				<view :class="['chapter-name']" v-for="(item,index) in noteList" :key="item.num"
					@click="selectChapter(item.num)">
					<view class="name">
						{{item.name}}
					</view>
					<uni-icons type="star-filled"></uni-icons>
				</view>
				<view v-if="noteList.length==0" :style="{height:`calc(100vh - 36px - ${RpxToPx(statusBarHeight)}px)`}"
					class="empty">
					<image style="width: 70vw;" src="../../static/empty.png" mode=""></image>
				</view>
			</scroll-view>

		</uni-popup>

		<view :class="['top',shownav?'show':'']" :style="{
			height:( info.author!='本地导入'?150:100)+'rpx',
			transform: `translate(0, -${(info.author!='本地导入'?150:100)+statusBarHeight}rpx)`}">
			<view class="top-top">
				<view class="left" @click="back()">
					<view class="icon-fanhui iconfont"></view>
					<span class="name">{{name}}</span>
				</view>
				<view class="right">
					<view class="icon-xiazai iconfont" @click="showDowload"></view>
					<view class="icon-gongneng iconfont" @click="toDetail()"></view>
				</view>
			</view>
			<view class="url" v-if="info.author!='本地导入'">
				{{chapters[currentchapters]?chapters[currentchapters].url:null}}
			</view>
		</view>
		<view :class="['bottom',shownav?'show':'']">
			<view class="bottom-top">
				<view class="action" @click="preChapter()">
					上一章
				</view>
				<Slider :activeColor="$store.state.theme.background" style="flex: 1;margin: 0;" :min="0"
					:value="currentchapters" :max="chapters.length-1" @change="sliderChange" />
				<view class="action" @click="nextChapter()">
					下一章
				</view>
			</view>
			<view class="bottom-bottom">
				<view class="item" @click="showMulu()">
					<view class="box">
						<view class="iconfont icon-shuju"></view>
						<view class="title">
							目录
						</view>
					</view>
				</view>
				<view class="item" @click="changeTheme()">
					<view class="box">
						<view class="iconfont icon-liulanliang"></view>
						<view class="title">
							{{$store.state.theme.themeType==='light'?'夜间':'日间'}}
						</view>
					</view>
				</view>
				<view class="item" @click="showSources()">
					<view class="box">
						<view class="iconfont icon-shijie"></view>
						<view class="title">
							换源
						</view>
					</view>
				</view>
				<view class="item" @click="showShezhi()">
					<view class="box">
						<view class="iconfont icon-shezhi"></view>
						<view class="title">
							设置
						</view>
					</view>
				</view>
				<view class="item" @click="showShezhiMore()">
					<view class="box">
						<view class="iconfont icon-keji"></view>
						<view class="title">
							更多
						</view>
					</view>
				</view>
			</view>
		</view>
		<view :class="['shezhi',showshezhi?'show':null]">
			<view class="shezhi-a">
				<view class="label-left icon-zitisuoxiao iconfont">
				</view>
				<Slider :min="30" :value="parseInt(fontsize)" @change="setFontSize" :max="60"
					style="flex: 1;margin:10rpx 50rpx;" />
				<view class="label-right icon-zitifangda iconfont">
				</view>
			</view>
			<view class="shezhi-b">
				<view class="left">
					<view class="label-left icon-taiyang-copy iconfont">
					</view>
					<Slider :min="0" :step="0.01" :value="screenBrightness" @change="setScreenBrightness" :max="1"
						style="flex: 1;margin:10rpx 50rpx;"></Slider>
					<view class="label-right icon-taiyang-copy iconfont">
					</view>
				</view>
				<!-- <view plain class="button">跟随系统</view> -->
			</view>
			<view class="shezhi-c">
				<view :class="['color','a',background_color=='rgb(239, 238, 238)'?'active':null]"
					@click="background_color='rgb(239, 238, 238)';nav_color='rgb(235,235,235)';$store.commit('theme/SET_NAVCOLOR',nav_color);$store.commit('theme/SET_BACKGROUND',background_color);$store.commit('theme/SET_COLOR1','#cbcaca');$store.commit('theme/SET_COLOR2','#ffffff');">
				</view>
				<view :class="['color','b',background_color=='rgb(223, 234, 226)'?'active':null]"
					@click="background_color='rgb(223, 234, 226)';nav_color='rgb(239, 244, 240)';$store.commit('theme/SET_NAVCOLOR',nav_color);$store.commit('theme/SET_BACKGROUND',background_color);$store.commit('theme/SET_COLOR1','#bec7c0');$store.commit('theme/SET_COLOR2','#ffffff');">

				</view>
				<view :class="['color','c',background_color=='rgb(234,223,185)'?'active':null]"
					@click="background_color='rgb(234,223,185)';nav_color='rgb(250, 243, 227)';$store.commit('theme/SET_NAVCOLOR',nav_color);$store.commit('theme/SET_BACKGROUND',background_color);$store.commit('theme/SET_COLOR1','#c7be9d');$store.commit('theme/SET_COLOR2','#ffffd5');">

				</view>
				<view :class="['color','d',background_color=='rgb(223, 216, 218)'?'active':null]"
					@click="background_color='rgb(223, 216, 218)';nav_color='rgb(244, 236, 234)';$store.commit('theme/SET_NAVCOLOR',nav_color);$store.commit('theme/SET_BACKGROUND',background_color);$store.commit('theme/SET_COLOR1','#beb8b9');$store.commit('theme/SET_COLOR2','#fff8fb');">

				</view>
				<view :class="['color','e',background_color=='rgb(174, 205, 226)'?'active':null]"
					@click="background_color='rgb(174, 205, 226)';nav_color='rgb(214, 230, 237)';$store.commit('theme/SET_NAVCOLOR',nav_color);$store.commit('theme/SET_BACKGROUND',background_color);$store.commit('theme/SET_COLOR1','#94aec0');$store.commit('theme/SET_COLOR2','#c8ecff');">

				</view>
				<view class="action" @click="showMore()">
					更多背景字体
				</view>
			</view>
			<view class="shezhi-d">
				<view :class="['left',lineheight==60?'active':null]"
					@click="()=>{lineheight=60;init();page();$store.commit('theme/SET_LINEHEIGHT',lineheight);}">
					<view class="iconfont icon-gongnengtubiao-77">
					</view>
				</view>
				<view :class="['left',lineheight==70?'active':null]"
					@click="()=>{lineheight=70;init();page();$store.commit('theme/SET_LINEHEIGHT',lineheight);}">
					<view class="iconfont icon-gongnengtubiao-43">
					</view>
				</view>
				<view :class="['left',lineheight==80?'active':null]"
					@click="()=>{lineheight=80;init();page();$store.commit('theme/SET_LINEHEIGHT',lineheight);}">
					<view class="iconfont icon-dengyu">
					</view>
				</view>
				<view class="action">
					自动翻页(未开发)
				</view>
			</view>
			<view class="shezhi-e">
				<view :class="['item',type==0?'active':'']" @click="type=0">
					左右滑动
				</view>
				<view :class="['item',type==1?'active':'']" @click="type=1">
					上下滑动
				</view>
			</view>
		</view>
		<view :class="['shezhiSpeech',showshezhispeech?'show':null]">
			<view class="shezhi-a">
				<view class="label-left " style="font-size: 24rpx;white-space: nowrap;">
					音调
				</view>
				<Slider :min="1" :value="picth" @change="onPicthChange" :max="100"
					style="flex: 1;margin:10rpx 50rpx;" />
				<view class="label-right" style="font-size: 24rpx;white-space: nowrap;">
					{{picth}}
				</view>
			</view>
			<view class="shezhi-b">
				<view class="left">
					<view class="label-left" style="font-size: 24rpx;white-space: nowrap;">
						速度
					</view>
					<Slider :min="0" :step="1" :value="speed" @change="onSpeedChange" :max="100"
						style="flex: 1;margin:10rpx 50rpx;"></Slider>
					<view class="label-right" style="font-size: 24rpx;white-space: nowrap;">
						{{speed}}
					</view>
				</view>
			</view>
			<view class="shezhi-c">
				<view class="left" @click="startSpeech()">
					{{speeching?'停止':'播放'}}
				</view>
				<view class="middle">
					<picker :value="hour+':'+minute" mode="time" @change="timeChange">
						<text>定时关闭</text>
					</picker>
				</view>
				<view class="right" @click="openSpeechSetting()">
					打开设置
				</view>
			</view>
			<view class="shezhi-d">
				<radio-group @change="engineChange">
					<label v-for="(item, index) in engineList" :key="item.name">
						<view style="padding: 20rpx 0;">
							<radio :value="index" :checked="engine === index" />
							<text>{{item.label}}</text>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view :class="['shezhi-more',showshezhimore?'show':null]">
			<view class="item">
				<view class="">
					翻页动画
				</view>
				<switch :checked="options.duration" @change="durationChange"></switch>
			</view>
			<view class="item">
				<view class="">
					音量翻页
				</view>
				<switch :checked="options.volumePage" @change="volumePageChange"></switch>
			</view>
		</view>
		<view class="bottom-info">
			<view v-if="type===0" class="left">
				{{title}}
			</view>
			<view v-if="type===0">
				{{(current+1)+'/'+char.length}}
			</view>
		</view>
		<view class="top-info">
			<uni-countdown v-if="hour!=0||minute!=0" @timeup="timeup" ref="countdown" :start="false" :show-day="false"
				:day="0" :hour="hour" :minute="minute" :second="0"></uni-countdown>
			<view class="time">
				{{time}}
			</view>
		</view>
		<view :class="['more',showmore?'show':null]">
			<uni-segmented-control :current="more_current" :values="['背景','字体']"
				@clickItem="e=>{more_current=e.currentIndex}" styleType="text" activeColor="#007aff">
			</uni-segmented-control>
			<scroll-view :scroll-y="true" :style="{'height':`calc(70vh - 36px)`}" v-show="more_current === 0">
				<!-- 				<button size="mini" style="margin: 20rpx;display: inherit;" type="primary"
					@click="colorList.push({background:'#fff',navColor:'#000'})">新增(长按删除)</button> -->
				<view :class="['color-item']" v-for="(item,index) in colorList" :key="index">
					<view @click="changeColor(item)"
						:class="['left',$store.state.theme.background==item.background?'active':null]"
						:style="{'background':item.background}">
						<!-- ,'box-shadow':`10rpx 10rpx 15rpx ${item.color1},-10rpx -10rpx 15rpx ${item.color2}` -->
						{{item.background}}
					</view>
				</view>
			</scroll-view>
			<scroll-view class="font-box" :scroll-y="true" :style="{'height':`calc(70vh - 36px)`}"
				v-show="more_current === 1">
				<view style="height: 20rpx;">

				</view>
				<view v-for="(item,index) in fontList"
					:class="['font-item',$store.state.theme.font==item.name?'active':null]" @click="changefont(item)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>

		<scroll-view :scroll-y="true" :class="['sources',showsources?'show':null]">
			<view :class="['source',currentSource==item.id?'active':null]" v-for="(item,index) in sources" :key="index"
				@click="changeSource(item)">
				<view class="name">
					{{item.name}}{{item.lastest_chapter?" 最新:"+item.lastest_chapter:null}}
				</view>
				<view class="host">
					{{item.host}}
				</view>
			</view>
		</scroll-view>
		<view v-if="status==0" :class="['add',shownav?'show':'']" @click="addNovel()">
			<uni-icons :color="$store.state.theme.themeType=='dark'?'white':'black'" type="plus" size="30"></uni-icons>
		</view>
		<view :class="['speech',shownav?'show':'']" @click="showshezhiSpeech()">
			<uni-icons :color="$store.state.theme.themeType=='dark'?'white':'black'" type="headphones" size="30">
			</uni-icons>
		</view>
		<view :class="['addNote',shownav?'show':'']" @click="addNote()">
			<uni-icons type="star-filled"></uni-icons>加入书签
		</view>
		<uni-popup class="download" ref="download" type="dialog">
			<uni-popup-dialog title="下载" mode="base" message="成功消息" :duration="2000" :before-close="true"
				@close="$refs.download.close()" @confirm="startDownload()">
				<uni-data-checkbox mode="list" v-model="downLoadtype"
					:localdata="[{value:'0',text:'从当前网页开始'},{value:'1',text:'全部开始'},{value:'2',text:'保存为txt(uni)'},{value:'3',text:'保存为txt(android)'}]">
				</uni-data-checkbox>
			</uni-popup-dialog>
		</uni-popup>

		<swiper :disable-touch="true" v-if="type===0" style="height: 100vh;" @tap="touch" @touchstart="touchstart"
			@touchend="touchend" :indicator-dots="false" :autoplay="false" :current="current"
			:duration="options.duration?duration:0" @change="pageChange">
			<swiper-item v-for="i,index in char" :key="index" :index='index'>
				<view class="swiper-item"
					:style="{'line-height':lineheight+'rpx','font-size':fontsize+'rpx','padding-top':`${40+statusBarHeight}rpx`,'padding-bottom':`${100}rpx`}">
					<view v-if="index==0" class="title">
						{{showTitle}}
					</view>
					{{i}}
					<!-- <text v-for="j,j1 in i" :keys="j1">{{j}}</text> -->
				</view>
			</swiper-item>
		</swiper>

		<scroll-view
			:style="{'line-height':lineheight+'rpx','font-size':fontsize+'rpx','padding-top':`${40+statusBarHeight}rpx`}"
			@click="touch" :scroll-top="scrollTop" :upper-threshold="10" :lower-threshold="10" v-if="type===1"
			@scrolltolower='nextChapter2()' :scroll-y="true"
			style="height: calc(100vh - var(--status-bar-height) - 40rpx);">
			<view :style="{'padding-top':`${i.content?statusBarHeight:0}rpx`}"
				:class="['content',startCurrentchapters>index?'pre':null]" v-if="currentchapters>=index-1"
				v-for="i,index in chapters" :key="index">
				<view class="swiper-item" :style="{'line-height':lineheight+'rpx','font-size':fontsize+'rpx'}">
					<view v-if="i.content" class="title"
						:style="{'line-height':lineheight+'rpx','font-size':'38rpx','font-weight':'bloder'}">
						{{i.name}}
					</view>
					{{page2(i.content)}}
				</view>
			</view>
		</scroll-view>
		<colorPicker ref="colorPicker" @confirm="confirmColor"></colorPicker>
	</view>
</template>

<script>
	import colorPicker from '../../components/t-color-picker/t-color-picker.vue'

	const SpeechTTS = uni.requireNativePlugin('MT-TTS-Speech');
	import request from '../../utils/request.js'
	import request2 from '../../utils/request2.js'
	import baseUrl from '../../config.js'
	import Slider from '../../components/slider.vue'
	import {
		getFontList
	} from "../../api/index.js"
	import {
		addError
	} from '../../api/system.js'
	import {
		RpxToPx,
		PxToRpx
	} from "../../utils/index.js"
	export default {
		components: {
			colorPicker,
			Slider
		},
		watch: {
			speeching: function(n) {
				if (!n) {
					this.wakeLock()
					plus.key.removeEventListener("keydown", this.Volumn);
					if (this.options.volumePage)
						plus.key.addEventListener("keydown", this.Volumn);
				} else {
					this.releaseWakeLock()
					plus.key.removeEventListener("keydown", this.Volumn);
				}
			},
			showshezhispeech: function(n) {
				if (n) {
					plus.key.removeEventListener("keydown", this.Volumn);
				} else {
					if (!this.speeching) {
						plus.key.removeEventListener("keydown", this.Volumn);

						if (this.options.volumePage)
							plus.key.addEventListener("keydown", this.Volumn);
					}
				}
			},
			showmulu: function(n) {
				if (n) {
					this.$refs.mulu.open()
				} else {
					this.$refs.mulu.close()
				}
			},
			shownav(n) {
				if (n) {
					// #ifdef APP
					plus.navigator.setFullscreen(false);
					//#endif
				} else {

					// #ifdef APP
					plus.navigator.setFullscreen(true);
					//#endif
				}
			},

		},
		data() {
			return {
				replace: [{
						key: / */gsu,
						value: ''
					},
					{
						key: /<\/?a.*?>.*?<\/a>/gus,
						value: ''
					},
					{
						key: /<\/?div.*?>/gus,
						value: ''
					},
					{
						key: /<\/?p.*?>/gus,
						value: '\n'
					},

					{
						key: /<script.*?>.*?<\/script>/gs,
						value: ''
					},
					{
						key: /<br ?\/?>/gus,
						value: '\n'
					},
					{
						key: /\r\n\r\n/gus,
						value: '\r\n'
					},
					{
						key: /&nbsp;&nbsp;/gus,
						value: '　'
					},
					{
						key: /&nbsp;/gus,
						value: ' '
					},
					{
						key: /&emsp;/gus,
						value: '　'
					},
					{
						key: /　+/gs,
						value: '　　'
					},
					{
						key: /[\p{sc=Han}\p{P}\p{N}\p{L}]+\n/gus,
						value: '　　$&'
					},
					{
						key: /(.*?)\n/gs,
						value: '　　$1\n'
					},
					{
						key: /	/gs,
						value: ''
					},
					{
						key: /　　+/gs,
						value: '　　'
					},
					{
						key: /　+\n/gs,
						value: ''
					},

					{
						key: /<.*?>/gs,
						value: ''
					},
					{
						key: /【.*?咪咪阅读.*?】/gs,
						value: ''
					},
				],

				scrollTop: 0,
				startCurrentchapters: 0,
				replaceList: [],
				id: null,
				duration: 300,
				nav_color: 'rgb(235,235,235)',
				background_color: 'rgb(248, 248, 248)', //背景颜色
				chapter_y: 0, //目录距离顶部
				shownav: false, //是否展示顶部栏，底部栏
				showshezhi: false, //是否展示设置
				showmore: false,
				showmulu: false,
				showsources: false,
				showshezhimore: false,
				showshezhispeech: false,
				mulu_current: 0, //目录功能索引
				more_current: 0, //更多背景字体索引
				sources: [], //源
				noteList: [],
				currentSource: null, //当前源id
				chapters: [], //目录列表
				current: 0, //点前所在页
				currentchapters: 0, //当前章节
				currentchaptersnum: 0,
				type: 0, //看小说类型//
				char: [], //所有页
				title: null, //章节标题
				status: 0,
				fontsize: 38, //2px
				lineheight: 80, //40px
				statusBarHeight: 0, //安全区域
				content: null,
				t: null, //防抖器专用
				name: null, //小说名称
				chapter_pattern: null, //
				list_pattern: null, //
				content_pattern: null, //
				info: null, //小说信息
				fontList: [], //字体列表
				screenBrightness: 0, //屏幕亮度
				downLoadtype: '0', //下载类型
				reverse: false, //倒序
				sourceIndex: 0, //源索引
				startIndex: 0,
				containSize: 0,
				novelShow: false,
				bak_chapters: [],
				showTitle: null,
				time: new Date(),
				picth: 50,
				speed: 50,
				hour: 0,
				minute: 0,
				options: {

				},
				speeching: false,
				engineList: [],
				engine: 0,
				colorList: [{
					background: '#edf1fa',
					nacColor: '#edf1fa',
					color1: '#c9cdd5',
					color2: '#ffffff'
				}, {
					background: '#faebf2',
					nacColor: '#faebf2',
					color1: '#d5c8ce',
					color2: '#ffffff'
				}, {
					background: '#95afc0',
					nacColor: '#95afc0',
					color1: '#7f95a3',
					color2: '#abc9dd'
				}]
			}
		},

		onLoad(e) {
			this.speechInit()
			this.dateFormat()
			this.timeClock = setInterval(() => {
				this.dateFormat()
			}, 4000)
			this.getFontList()
			this.info = uni.getStorageSync('info')
			this.options = uni.getStorageSync('options') || {}

			this.background_color = this.$store.state.theme.background
			this.fontsize = this.$store.state.theme.fontSize
			this.lineheight = this.$store.state.theme.lineHeight
			let storage = uni.getStorageSync("novel_" + this.info.name + '_' + this.info.author)
			if (storage) {
				this.currentchapters = storage.currentchapters
				this.startCurrentchapters = storage.currentchapters
				this.status = storage.status
				this.name = this.info.name
				this.current = storage.current
				if (storage.info.author != "本地导入") {
					this.currentSource = storage.currentSource
					this.bak_chapters = storage.chapters
				} else {
					this.chapters = storage.chapters
				}
			}
			this.type = uni.getStorageSync('ReadType') || 0
			if (!this.info) {
				uni.switchTab({
					url: '../list/list'
				})
				return
			}
			if (this.info.author == "本地导入") {
				this.init()
				this.getContent(this.current, this.currentchapters)
			} else {
				this.sources = this.info.sources
				let pageList = getCurrentPages()
				if (pageList[pageList.length - 2] && pageList[pageList.length - 2].route != 'pages/detail/detail') {
					this.getSourceList()
				}
				this.load()
			}
		},

		onShow() {
			//#ifdef APP
			plus.key.removeEventListener("keydown", this.Volumn);
			if (this.options.volumePage)
				plus.key.addEventListener("keydown", this.Volumn);
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
			let storage = uni.getStorageSync("novel_" + this.info.name + '_' + this.info.author)
			if (storage) {
				// this.currentchapters = storage.currentchapters
				this.currentSource = storage.currentSource
				// this.current = storage.current
				this.status = storage.status
				this.bak_chapters = storage.chapters
				this.noteList = storage.noteList || []
			}
			// #ifdef APP
			this.getScreenBrightness()
			plus.navigator.setFullscreen(true);
			plus.io.requestFileSystem(plus.io.PUBLIC_DOWNLOADS, success => {
				success.root.getFile(this.$store.state.theme.font + '.ttf', {}, r => {
					uni.loadFontFace({
						family: 'currentFont',
						source: `url(${plus.io.convertLocalFileSystemURL(r.toURL())})`,
					})
				})
			})
			//#endif
		},

		onReady() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		onHide() {
			this.saveStorage()
		},
		onUnload() {
			SpeechTTS.destroy();
			clearInterval(this.timeClock)
			this.saveStorage()
			// #ifdef APP
			plus.navigator.setFullscreen(false)
			plus.key.removeEventListener('keydown', this.Volumn)
			//#endif
		},
		computed: {

			endIndex() {
				let end = this.startIndex + this.containSize
				if (end > this.chapters.length && this.chapters.length != 0) {
					this.startIndex = this.chapters.length - 1 - this.containSize
					this.startIndex = this.startIndex < 0 ? 0 : this.startIndex
					return this.chapters.length - 1
				}
				return end
			},
			showDataList() {
				let list = JSON.parse(JSON.stringify(this.chapters))
				if (this.reverse) list = list.reverse()
				return list.slice(this.startIndex, this.endIndex + 1)
			},
			topBlankFill() {
				return this.startIndex * this.RpxToPx(100)
			},
			bottomBlankFill() {
				return (this.chapters.length - this.endIndex) * this.RpxToPx(100)
			}
		},
		methods: {
			wakeLock() {
				//Android  
				var main = plus.android.runtimeMainActivity();
				var Context = plus.android.importClass("android.content.Context");
				var PowerManager = plus.android.importClass("android.os.PowerManager");
				var pm = main.getSystemService(Context.POWER_SERVICE);
				this.g_wakelock = pm.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, "ANY_NAME");
				this.g_wakelock.acquire();
			},

			//结束程序后台运行  
			releaseWakeLock() {
				if (this.g_wakelock != null && this.g_wakelock.isHeld()) {
					this.g_wakelock.release();
					this.g_wakelock = null;
				}
			},
			timeup() {
				SpeechTTS.stop();
			},
			timeChange(e) {
				this.hour = parseInt(e.detail.value.split(':')[0])
				this.minute = parseInt(e.detail.value.split(':')[1])

				uni.showToast({
					icon: "none",
					title: this.hour + "小时" + this.minute + "分钟后停止。"
				})
				setTimeout(() => {
					this.$refs.countdown.update()
				}, 1000)
			},
			durationChange(e) {
				this.options.duration = e.detail.value
			},
			volumePageChange(e) {
				this.options.volumePage = e.detail.value
				plus.key.removeEventListener("keydown", this.Volumn);
				if (this.options.volumePage)
					plus.key.addEventListener("keydown", this.Volumn);
				else
					plus.key.removeEventListener("keydown", this.Volumn);

			},
			openSpeechSetting() {
				SpeechTTS.openSettings()
			},
			speechInit() {
				//#ifdef APP
				SpeechTTS.init((callback) => {});
				SpeechTTS.onDone((res) => {
					this.touch({
						detail: {
							x: this.width * 2 / 3 + 1
						}
					})
				});
				SpeechTTS.onError(res => {
					console.log(res);
				})
				SpeechTTS.getInstallTTS(res => {
					this.engineList = res
				})

				//#endif
			},
			engineChange(e) {
				SpeechTTS.stop()
				this.speeching = false
				this.engine = e.detail.value
				SpeechTTS.setEngine(this.engineList[this.engine].name)
			},
			onPicthChange(e) {
				this.picth = e.detail.value;
			},
			onSpeedChange(e) {
				this.speed = e.detail.value;
			},
			startSpeech() {
				if (this.speeching) {
					SpeechTTS.stop()
					this.speeching = false
					return
				}
				this.playAudio(this.char[this.current])
			},
			playAudio(text) {
				this.type = 0
				this.speeching = true
				SpeechTTS.setPitch(this.picth);
				SpeechTTS.setSpeed(this.speed);
				SpeechTTS.speak({
					text: text
				});
			},
			getSourceList() {
				let that = this
				let sources = this.sources
				let tasks = sources.map((i, j) => {
					return {
						func: this.getNovelDetail,
						index: j
					}
				})
				Promise.all(Array.from({
					length: 8
				}).map((i, j) => {
					return new Promise(resolve => {
						function run() {
							if (tasks.length <= 0) {
								resolve()
								return
							}
							let task = tasks.shift()
							task.func(task.index).then(res => {
								run()
							})
						}
						run()
					})
				})).then(res => {

				})
			},
			getNovelDetail(index) {
				return new Promise(resolve => {
					let that = this
					let description_zz = this.sources[index].description_zz
					let image_zz = this.sources[index].image_zz
					let type_zz = this.sources[index].type_zz
					let lastest_chapter_zz = this.sources[index].lastest_chapter_zz
					if (!lastest_chapter_zz) resolve()
					request2(this.sources[index].url).then(res => {
						let r = new RegExp(description_zz, 'gs')
						this.$set(this.sources[index], 'description', r.exec(res)[1])

						r = new RegExp(image_zz, 'gs')
						this.$set(this.sources[index], 'image', r.exec(res)[1])

						r = new RegExp(type_zz, 'gs')
						this.$set(this.sources[index], 'type', r.exec(res)[1])

						r = new RegExp(lastest_chapter_zz, 'gs')
						this.$set(this.sources[index], 'lastest_chapter', r.exec(res)[1])
						resolve()
					}).catch(res => {
						resolve()
						console.log(res);
					})
				})
			},
			Volumn(e) {
				switch (e.keyCode) {
					case 24: //+
						this.touch({
							detail: {
								x: 0
							}
						})
						break;
					case 25: //-
						this.touch({
							detail: {
								x: this.width * 2 / 3 + 1
							}
						})
						break;
				}

			},
			changeColor(item) {
				this.background_color = item.background;
				this.nav_color = item.navColor;
				this.$store.commit('theme/SET_NAVCOLOR', item.navColor);
				this.$store.commit('theme/SET_BACKGROUND', item.background);
				this.$store.commit('theme/SET_COLOR1', item.color1);
				this.$store.commit('theme/SET_COLOR2', item.color2);

			},
			dateFormat() {
				let date = new Date();
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				this.time = hours + ":" + minutes;
				// return year + "-" + month + "-" + day;
			},
			addNote() {
				let list = this.noteList.map(i => i.name + '_' + i.num)
				if (list.indexOf(this.title + '_' + this.currentchapters) > -1) {
					uni.showToast({
						icon: "none",
						title: "已存在该书签"
					})
					return
				}
				uni.showToast({
					icon: "none",
					title: "添加书签成功"
				})
				this.noteList.push({
					name: this.title,
					num: this.currentchapters,
				})
			},
			confirmColor(e) {
				this.colorList[this.colorAction.index][this.colorAction.on] = e.hex
			},
			deleteColor(index) {
				let that = this
				uni.showModal({
					title: "提示",
					content: "删除该主题？",
					success(res) {
						if (res.confirm) {
							that.colorList.splice(index, 1)
						}
					}
				})
			},
			touchstart(e) {
				this.startX = e.changedTouches[0].clientX
				this.startY = e.changedTouches[0].clientY
			},
			touchend(e) {
				let endX = e.changedTouches[0].clientX
				let endY = e.changedTouches[0].clientY
				let juli = 50
				if (this.current == this.char.length - 1 && endX - this.startX <= -1 * juli) {
					this.touch({
						detail: {
							x: this.width * 2 / 3 + 1
						}
					})
				} else if (this.current == 0 && endX - this.startX >= juli) {
					this.touch({
						detail: {
							x: this.width * 1 / 3 - 1
						}
					})

				} else if (endX - this.startX <= -1 * juli) {
					this.current += 1
				} else if (endX - this.startX >= juli) {
					this.current -= 1
				}
			},
			pageChange(e) {
				this.current = e.detail.current
			},
			toDetail() {
				if (this.info.author == "本地导入") {
					uni.showToast({
						icon: 'none',
						title: "本地导入书籍，不可查看详情"
					})
					return
				}
				this.saveStorage()
				uni.navigateTo({
					url: "../detail/detail"
				})
				//#ifdef APP
				plus.key.removeEventListener('keydown', (e) => {
					switch (e.keyCode) {
						case 24: //volumeupbutton  
							this.touch({
								detail: {
									x: this.width * 2 / 3 + 1
								}
							})
							break;
						case 25: //volumedownbutton  
							this.touch({
								detail: {
									x: 0
								}
							})
							break;
					}
				})
				//#endif
			},
			addNovel() {
				this.status = 1
				uni.showToast({
					icon: "success",
					title: "加入书架成功"
				})
			},

			//开始缓存
			startDownload() {
				this.$refs.download.close()
				let msg = `保存位置:/sdcard/新阅小说/${this.name} 作者:${this.info.author}.txt`
				let index = 0
				if (this.downLoadtype == '0') {
					index = this.currentchapters + 1
				}
				let t = index
				let tasks = this.chapters.slice(index).map(_ => this.fetch)
				Promise.all(Array.from({
					length: 4
				}).map((i, j) => {
					return new Promise(resolve => {
						function run() {
							if (tasks.length <= 0) {
								resolve()
								return
							}
							let task = tasks.shift()
							task(t++).then(_ => {
								run()
							})
						}
						run()
					})
				})).then(_ => {
					if (this.downLoadtype == '3') {
						let context = ""
						for (let s of this.chapters) {
							context = context + '\n' + s.name + '\n' + this.page2(s.content)
						}
						var ChiMoudle = uni.requireNativePlugin('ChiMoudle')
						ChiMoudle.exportTXT({
							context: context,
							name: `${this.name} 作者:${this.info.author}`
						}, e => {
							uni.showToast({
								icon: "none",
								title: msg,
								duration: 3000
							})
						})
						return
					}
					if (this.downLoadtype == '2') {
						//#ifdef APP
						let that = this
						let context = ""
						for (let s of this.chapters) {
							context = context + '\n' + s.name + '\n' + this.page2(s.content)
						}
						plus.io.requestFileSystem(plus.io.PRIVATE_DOC,
							fobject => {
								fobject.root.getFile(
									`TXT/${this.name} 作者:${this.info.author}.txt`, {
										create: true
									},
									function(fileEntry) {
										fileEntry.file(function(file) {
											fileEntry.createWriter(function(writer) {
												writer.seek(file.size - 1)
												writer.write(context);
												uni.showModal({
													content: "保存位置：" + file
														.fullPath
												})
											}, function(e) {
												console.log(e);
												addError({
													"error2": e
												})
											});
										});
									});
							},
							error => {
								console.log(error)
								addError({
									"error": error
								})
							}
						)
						//#endif
					} else {
						uni.showToast({
							icon: "none",
							title: "下载完成！",
							duration: 2000
						})
					}
				})
				if (this.downLoadtype == '2' || this.downLoadtype == '3') {
					uni.showToast({
						icon: "none",
						title: "请等待缓存完成，完成后才能保存为txt！",
						duration: 3000
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "开始缓存,退出当前页面停止下载",
						duration: 4000
					})
				}

			},

			fetch(index) {
				return new Promise(resolve => {
					if (!this.chapters[index].content) {
						request2(this.chapters[index].url).then(res => {
							let r = new RegExp(this.content_pattern.replace('[内容]', '(.*?)')
								.replace(
									/\[任意\]/g,
									'.*?'),
								'gs') //每一章的内容
							this.chapters[index].content = res.match(r)[0]
							if (this.content_next_zz) {
								r = new RegExp(this.content_next_zz, 'gs')
								let next_results = r.exec(res)
								if (next_results) {
									let next = next_results[1]
									if (next.indexOf(this.info.sources[this.sourceIndex].host) == -1) {
										if (next[0].charCodeAt() == 47) {
											next = this.info.sources[this.sourceIndex].host + next
										} else {
											let next_host = /.*\//g.exec(this.info.sources[this
												.sourceIndex].url)[0]
											next = next_host + next
										}
									}
									this.downNext(next, index).then(_ => {
										resolve()
									})
								}
								return
							}
							resolve()
						}).catch(res => {
							resolve()
						})
					} else {
						resolve()
					}
				})

			},

			downNext(url, index) {
				return new Promise(resolve => {
					function run(url, index) {
						request2(url).then(res => {
							let r = new RegExp(this.content_pattern.replace('[内容]', '(.*?)')
								.replace(
									/\[任意\]/g,
									'.*?'),
								'gs') //每一章的内容
							this.chapters[index].content += res.match(r)[0]
							r = new RegExp(this.content_next_zz, 'gs')
							let next_results = r.exec(res)
							if (next_results) {
								let next = next_results[1]
								if (next.indexOf(this.info.sources[this.sourceIndex].host) == -1) {
									if (next[0].charCodeAt() == 47) {
										next = this.info.sources[this.sourceIndex].host + next
									} else {
										let next_host = /.*\//g.exec(this.info.sources[this.sourceIndex]
											.url)[0]
										next = next_host + next
									}
								}
								run(next, index)
							} else {
								resolve()
							}
						}).catch(_ => {
							resolve()
						})
					}
					run(url, index)
				})

			},

			//提前下载
			fetch2(index, end, host) {
				if (index > end || index >= this.chapters.length) return
				if (host != this.info.sources[this.sourceIndex].host) return
				if (!this.chapters[index].content) {
					request2(this.chapters[index].url).then(res => {
						let r = new RegExp(this.content_pattern.replace('[内容]', '(.*?)')
							.replace(
								/\[任意\]/g,
								'.*?'),
							'gs') //每一章的内容
						this.chapters[index].content = res.match(r)[0]
						if (this.content_next_zz) {
							r = new RegExp(this.content_next_zz, 'gs')
							let next_results = r.exec(res)
							if (next_results) {
								let next = next_results[1]
								if (next.indexOf(this.info.sources[this.sourceIndex].host) == -1) {
									if (next[0].charCodeAt() == 47) {
										next = this.info.sources[this.sourceIndex].host + next
									} else {
										let next_host = /.*\//g.exec(this.info.sources[this.sourceIndex].url)[0]
										next = next_host + next
									}
								}
								this.downNext2(next, index, end, host)
							}
							return
						}

						this.fetch2(index + 1, end, host)
					}).catch(res => {
						this.fetch2(index + 1, end, host)
					})
				} else {
					this.fetch2(index + 1, end, host)
				}

			},

			//提前下载
			downNext2(url, index, end, host) {
				if (this.info.sources[this.sourceIndex].host != host) return
				request2(url).then(res => {
					let r = new RegExp(this.content_pattern.replace('[内容]', '(.*?)')
						.replace(
							/\[任意\]/g,
							'.*?'),
						'gs') //每一章的内容
					this.chapters[index].content += res.match(r)[0]
					r = new RegExp(this.content_next_zz, 'gs')
					let next_results = r.exec(res)
					if (next_results) {
						let next = next_results[1]
						if (next.indexOf(this.info.sources[this.sourceIndex].host) == -1) {
							if (next[0].charCodeAt() == 47) {
								next = this.info.sources[this.sourceIndex].host + next
							} else {
								let next_host = /.*\//g.exec(this.info.sources[this.sourceIndex].url)[0]
								next = next_host + next
							}
						}
						this.downNext2(next, index, end, host)
					} else {
						this.fetch2(index + 1, end, host)
					}
				})
			},



			//展示下载模态框
			showDowload() {
				if (this.info.author == "本地导入") {
					uni.showToast({
						icon: 'none',
						title: "本地导入书籍，不可下载"
					})
					return
				}
				this.$refs.download.open()
			},

			//获取章节内容
			getContent(currentNum, currentChapterNum) {
				this.duration = 0
				if (this.chapters[currentChapterNum] && this.chapters[currentChapterNum].content) {
					this.content = this.chapters[currentChapterNum].content
					this.title = this.chapters[currentChapterNum].name
					this.page()
					if (currentNum == 'pre') {
						this.current = this.char.length - 1
					} else {
						this.current = currentNum
					}
					if (this.speeching)
						this.playAudio(this.char[this.current])
					setTimeout(() => {
						this.duration = 300
					}, 300)
					this.showsources = false
					uni.hideLoading()
					return
				}
				uni.showLoading({
					mask: true
				})
				request2(this.chapters[currentChapterNum].url).then(res => {
					this.title = this.chapters[currentChapterNum].name
					let r = new RegExp(this.content_pattern.replace('[内容]', '(.*?)')
						.replace(
							/\[任意\]/g,
							'.*?'),
						'gs') //每一章的内容
					this.content = res.match(r)[0]
					if (this.content_next_zz) {
						try {
							r = new RegExp(this.content_next_zz, 'gs')
							let next_results = r.exec(res)
							let next = next_results[1]
							if (next.indexOf(this.info.sources[this.sourceIndex].host) == -1) {
								if (next[0].charCodeAt() == 47) {
									next = this.info.sources[this.sourceIndex].host + next
								} else {
									let next_host = /.*\//g.exec(this.info.sources[this.sourceIndex].url)[0]
									next = next_host + next
								}
							}
							this.fetchContent(next, currentNum, currentChapterNum)
							return
						} catch (e) {
							this.page()
							this.showsources = false
							if (currentNum == 'pre') {
								this.current = this.char.length - 1
							} else {
								this.current = currentNum
							}
							if (this.speeching)
								this.playAudio(this.char[this.current])
							setTimeout(() => {
								this.duration = 300
							}, 300)
							uni.hideLoading()
						}
					} else {
						this.page()
						this.showsources = false
						if (currentNum == 'pre') {
							this.current = this.char.length - 1
						} else {
							this.current = currentNum
						}
						if (this.speeching)
							this.playAudio(this.char[this.current])
						setTimeout(() => {
							this.duration = 300
						}, 300)
						uni.hideLoading()
					}
				}).catch((e) => {
					console.log(e);
					// addError({
					// 	message: e.errMsg,
					// 	name: this.info.sources[this.sourceIndex].name,
					// 	'url': this.info.sources[this.sourceIndex].url
					// })
					uni.showToast({
						icon: 'none',
						title: "获取章节内容失败"
					})
					uni.hideLoading()
				})

			},

			//获取下页内容
			fetchContent(url, currentNum, currentChapterNum) {
				request2(url).then(res => {
					let r = new RegExp(this.content_pattern.replace('[内容]', '(.*?)')
						.replace(
							/\[任意\]/g,
							'.*?'),
						'gs') //每一章的内容
					this.content += res.match(r)[0]
					r = new RegExp(this.content_next_zz, 'gs')
					let next_results = r.exec(res)
					if (next_results) {
						let next = next_results[1]
						if (next.indexOf(this.info.sources[this.sourceIndex].host) == -1) {
							if (next[0].charCodeAt() == 47) {
								next = this.info.sources[this.sourceIndex].host + next
							} else {
								let next_host = /.*\//g.exec(this.info.sources[this.sourceIndex].url)[0]
								next = next_host + next
							}
						}
						// next = next.indexOf(this.info.sources[this.sourceIndex].host) > -1 ? next : this.info
						// 	.sources[this.sourceIndex].host + next
						this.fetchContent(next, currentNum, currentChapterNum)
					} else {
						this.title = this.chapters[this.currentchapters].name
						this.chapters[this.currentchapters].content = this.content
						setTimeout(() => {
							this.duration = 300
						}, 300)
						this.page()
						this.showsources = false
						if (currentNum == 'pre') {
							this.current = this.char.length - 1
						} else {
							this.current = currentNum
						}
						uni.hideLoading()
					}

				}).catch(() => [
					uni.hideLoading()
				])
			},

			//设置字体
			setFontSize(e) {
				uni.hideToast()
				uni.showToast({
					icon: 'none',
					title: '' + e.detail.value,
					duration: 1000
				})
				this.fontsize = e.detail.value;
				this.lineheight = this.fontsize + this.lineheight - this.fontsize;
				this.init();
				this.page();
				this.$store.commit('theme/SET_FONTSIZE', e.detail.value)
			},

			//设置亮度
			setScreenBrightness(e) {
				uni.hideToast()
				uni.showToast({
					icon: 'none',
					title: '' + e.detail.value,
					duration: 1000
				})
				let _this = this
				uni.setScreenBrightness({
					value: e.detail.value,
					success() {
						_this.screenBrightness = e.detail.value
					}
				})
			},

			//获取字体
			getFontList() {
				getFontList().then(res => {
					this.fontList = res
				})
			},

			//加载
			load() {

				this.init()
				uni.showLoading({
					mask: true
				})

				let _this = this
				let info = this.info

				this.name = info.name
				this.sourceIndex = info.sources.map(i => i.id).indexOf(this.currentSource)
				if (this.sourceIndex == -1) {
					this.sourceIndex = 0
					this.currentSource = info.sources[this.sourceIndex].id
				}
				let sourceIndex = this.sourceIndex
				if (this.info.sources[sourceIndex].replaceList.length) {
					this.replaceList = this.info.sources[sourceIndex].replaceList
				}
				this.chapter_pattern = info.sources[sourceIndex].chapter_pattern
				this.content_pattern = info.sources[sourceIndex].content_pattern
				this.list_pattern = info.sources[sourceIndex].list_pattern
				this.list_next_zz = info.sources[sourceIndex].list_next_zz
				this.content_next_zz = info.sources[sourceIndex].content_next_zz
				if (info.sources[sourceIndex].all_mulu_zz) {
					request2(this.info.sources[this.sourceIndex].url).then(res => {
						let r = new RegExp(info.sources[sourceIndex].all_mulu_zz, 'gs')
						let next = r.exec(res)[1]
						if (next.indexOf(info.sources[sourceIndex].host) == -1) {
							if (next[0].charCodeAt() == 47) {
								next = info.sources[sourceIndex].host + next
							} else {
								let next_host = /.*\//g.exec(this.info.sources[this.sourceIndex].url)[0]
								next = next_host + next
							}
						}
						this.getList(next)
					})
				} else {
					this.getList()
				}
			},

			//获取章节列表
			getList(url) {
				if (!url) url = this.info.sources[this.sourceIndex].url

				let info = this.info
				let sourceIndex = this.sourceIndex
				let _this = this
				request2(url).then(res => {
					let r = new RegExp(this.list_pattern.replace('[内容]', '(.*?)').replace(
						/\[任意\]/g, '.*?'), 'gs') //章节列表
					let list = r.exec(res)[1]
					let index_name, index_url;
					index_url = this.chapter_pattern.indexOf('[链接]') < this.chapter_pattern.indexOf(
						'[章节]') ? 1 : 2
					index_name = this.chapter_pattern.indexOf('[链接]') > this.chapter_pattern.indexOf(
						'[章节]') ? 1 : 2
					let s = this.chapter_pattern.replace('[链接]', '(.*?)').replace('[章节]', '(.*?)')
						.replace(
							/\[任意\]/g,
							'.*')
					let r2 = new RegExp(s, 'gs') //每一章
					let i = null
					let a = this.chapters.length ? this.chapters.length : 0

					while (i = r2.exec(list)) {
						let url = null
						if (i[index_url].indexOf(info.sources[this.sourceIndex].host) > -1) {
							//包含host
							url = i[index_url]
						} else {
							//不包含host
							//判断
							if (i[index_url][0].charCodeAt() == 47) {
								url = info.sources[this.sourceIndex].host + i[index_url]
							} else {
								let next_host = /.*\//g.exec(this.info.sources[this.sourceIndex].url)[0]
								url = next_host + i[index_url]
							}
						}
						this.chapters.push({
							name: i[index_name],
							url: url,
							content: null,
							num: a
						})
						a = a + 1
					}
					if (this.chapters.length - 1 >= this.currentchapters && !this.novelShow && this.list_next_zz) {
						this.title = this.chapters[this.currentchapters].name
						this.novelShow = true
						if (this.chapters[_this.currentchapters].content) {
							this.content = this.chapters[_this.currentchapters].content
							this.page()
							this.showsources = false
							uni.hideLoading()
							return
						}
						uni.hideLoading()
						this.getContent(this.current, this.currentchapters)
						this.showsources = false
					}
					if (this.list_next_zz) {
						let r3 = new RegExp(this.list_next_zz, 'gs')
						let next = null
						let next_results = r3.exec(res)
						if (next_results) {
							next = next_results[1]
						}
						if (next) {
							if (next.indexOf(info.sources[this.sourceIndex].host) == -1) {
								if (next[0].charCodeAt() == 47) {
									next = info.sources[this.sourceIndex].host + next
								} else {
									let next_host = /.*\//g.exec(this.info.sources[this.sourceIndex].url)[0]
									next = next_host + next
								}
							}
							this.getList(next)
						} else {
							//章节列表循环完成

							this.bak_chapters.map((i, j) => {
								if (i.name == this.chapters[j].name && !this.chapters[j].content) {
									this.chapters[j].content = i.content
								}
							})
							uni.hideLoading()
						}
					} else {
						this.bak_chapters.map((i, j) => {
							if (i && i.name == this.chapters[j].name) {
								this.chapters[j].content = i.content
							}
						})
						uni.hideLoading()
						this.getContent(this.current, this.currentchapters)
					}
				}).catch((e) => {
					console.log(e);
					this.chapters = this.bak_chapters
					if (this.chapters.length > 0) {
						this.getContent(this.current, this.currentchapters)
						uni.showToast({
							icon: 'none',
							title: "获取章节列表失败，请查看已下载章节！"
						})
					} else {
						// addError({
						// 	message: e.errMsg,
						// 	name: this.info.sources[this.sourceIndex].name,
						// 	'url': this.info.sources[this.sourceIndex].url
						// })
						uni.showToast({
							icon: 'none',
							title: "获取章节列表失败"
						})
					}
					uni.hideLoading()
				})
			},

			//换源
			changeSource(i) {
				if (this.currentSource == i.id) return
				this.currentSource = i.id
				this.chapters = []
				this.bak_chapters = []
				this.novelShow = false
				uni.setStorageSync("novel_" + this.info.name + '_' + this.info.author, {
					'currentchapters': this.currentchapters,
					'current': 0,
					'info': this.info,
					'time': new Date().getTime(),
					'chapters': [],
					'currentSource': this.currentSource,
					'status': this.status,
					'noteList': this.noteList
				})
				this.load()
			},

			//展示换源
			showSources() {
				if (this.info.author == "本地导入") {
					uni.showToast({
						icon: 'none',
						title: "本地导入书籍，不可换源"
					})
					return
				}
				this.showmore = false
				this.shownav = false
				this.showshezhi = false
				setTimeout(() => {
					this.showsources = true
				}, 200)

			},

			//缓存
			saveStorage() {
				if (!this.info || !this.chapters.length) return
				uni.setStorageSync('ReadType', this.type)
				uni.setStorageSync('options', this.options)

				let time = new Date().getTime()
				let novelList = this.$store.state.data.novelList
				let o = JSON.parse(JSON.stringify(this.info))
				let key = "novel_" + this.info.name + '_' + this.info.author
				let names = novelList.map(i => {
					return "novel_" + i.name + '_' + i.author
				})
				let index = names.indexOf(key)
				if (index > -1) {
					novelList[index].time = time
					novelList[index].currentchapters = this.currentchapters + 1
					novelList[index].total = this.chapters.length
					novelList[index].status = this.status
					if (novelList[index].total != 0) novelList[index].lastestchapter = this.chapters[this.chapters
						.length - 1].name
				} else {
					o.time = time
					o.currentchapters = this.currentchapters + 1
					o.total = this.chapters.length
					o.status = this.status
					if (o.total != 0) o.lastestchapter = this.chapters[this.chapters.length - 1].name
					novelList.push(o)
				}
				this.$store.commit('data/SET_NOVELLIST', novelList)

				this.info.sources = this.sources
				uni.setStorageSync(
					key, {
						'currentchapters': this.currentchapters,
						'current': this.current,
						'info': this.info,
						'time': time,
						'chapters': this.chapters,
						'currentSource': this.currentSource,
						'status': this.status,
						'noteList': this.noteList
					}
				)
			},

			//主题切换
			changeTheme() {
				this.$store.commit('theme/SET_THEMETYPE');
			},

			//展示语音
			showshezhiSpeech() {

				plus.key.removeEventListener("keydown", this.Volumn);
				this.showmore = false
				this.showsources = false
				this.shownav = false
				this.showshezhi = false

				setTimeout(() => {
					this.showshezhispeech = true
				}, 200)
			},
			//展示更多背景字体
			showMore() {
				this.showshezhispeech = false
				this.showsources = false
				this.shownav = false
				this.showshezhi = false
				setTimeout(() => {
					this.showmore = true
				}, 200)
			},

			//字体切换
			changefont(i) {
				uni.showLoading({
					mask: true
				})
				let that = this
				plus.io.requestFileSystem(plus.io.PUBLIC_DOWNLOADS, success => {
					success.root.getFile(i.name + '.ttf', {}, r => {
						uni.loadFontFace({
							family: 'currentFont',
							source: `url(${plus.io.convertLocalFileSystemURL(r.toURL())})`,
						})
						this.$store.commit('theme/SET_FONT', i.name)
						uni.hideLoading()
					}, e => {
						var dtask = plus.downloader.createDownload(baseUrl.replace('/api/v1', '') +
							`/media/font/${i.name}.ttf`, {},
							function(d, status) {
								if (status == 200) { // 下载成功  
									uni.loadFontFace({
										family: 'currentFont',
										source: `url(${plus.io.convertLocalFileSystemURL(d.filename)})`,
									})
									that.$store.commit('theme/SET_FONT', i.name)
								} else { //下载失败 
									plus.downloader.clear();
								}
								uni.hideLoading()
							})
						dtask.start();
					})
				})



			},

			//返回上一级
			back() {
				this.saveStorage()
				uni.navigateBack()
			},

			//获取屏幕亮度
			getScreenBrightness() {
				let _this = this
				uni.getScreenBrightness({
					success(r) {
						_this.screenBrightness = r.value
					}
				})
			},
			showShezhiMore() {
				this.showsources = false
				this.showshezhi = false
				this.shownav = false
				this.showmore = false
				setTimeout(() => {
					this.showshezhimore = true
				}, 200)
			},
			//展示设置
			showShezhi() {
				this.showsources = false
				this.shownav = false
				this.showmore = false
				setTimeout(() => {
					this.showshezhi = true
				}, 200)
			},

			//初始化屏幕信息
			init() {
				let _this = this
				let res = uni.getSystemInfoSync()
				_this.containSize = ~~((res.screenHeight - 36 - res.statusBarHeight) / _this.RpxToPx(
					100)) + 2
				_this.height = res.screenHeight
				_this.width = res.screenWidth
				_this.col = parseInt((_this.width - 2 * parseInt(_this.RpxToPx(30))) / parseInt(_this
					.RpxToPx(_this.fontsize)))
				_this.row = parseInt((_this.height - (2 * parseInt(RpxToPx(20))) - parseInt(RpxToPx(80)) - res
						.statusBarHeight) /
					parseInt(_this.RpxToPx(_this.lineheight)))
				_this.statusBarHeight = _this.PxToRpx(res.statusBarHeight)
			},

			//章节滑动
			sliderChange(e) {
				let index = e.detail.value
				this.currentchapters = index
				this.startIndex = index
				if (this.type == 1) {
					this.scrollTop = 10
					this.startCurrentchapters = index;
					setTimeout(() => {
						this.scrollTop = 0
					}, 1000)
				}

				this.getContent(0, this.currentchapters)
			},

			PxToRpx(num) {
				return PxToRpx(num)
			},

			RpxToPx(num) {
				return RpxToPx(num)
			},

			//分页
			page() {
				this.chapters[this.currentchapters].content = this.content
				for (var t = this.title, v = "", n = t.length, i = 0; i < n; i++) {
					var o = t.charCodeAt(i);
					o = 32 == (o = o >= 33 && o <= 126 ? o + 65248 : o) ? 12288 : o,
						v += String.fromCharCode(o)
				}
				this.showTitle = v.replace(/\．/g, "。")

				// this.saveStorage()
				if (this.info.author != "本地导入") this.fetch2(this.currentchapters, this.currentchapters + 2, this.info
					.sources[this.sourceIndex].host)
				let _this = this
				let num = 0
				let char = []
				let c = []
				num += this.title.length
				num += this.col - (this.title.length % this.col)
				for (var i = 0; i < _this.replaceList.length; i++) {
					_this.content = _this.content.replace(new RegExp(_this.replaceList[i].key, 'gus'), _this.replaceList[i]
						.value)
				}
				// console.log(this.content);
				for (var i = 0; i < _this.replace.length; i++) {
					_this.content = _this.content.replace(new RegExp(_this.replace[i].key), _this.replace[i].value)
				}

				//网址处理
				this.content = this.content.replace(new RegExp('http.*\.[a-z]+', 'g'), '')
				this.content = this.content.replace(new RegExp('www.*\.[a-z]+\.[a-z]+', 'g'), '')

				for (var t = this.content, v = "", n = t.length, i = 0; i < n; i++) {
					var o = t.charCodeAt(i);
					o = 32 == (o = o >= 33 && o <= 126 ? o + 65248 : o) ? 12288 : o,
						v += String.fromCharCode(o)
				}
				this.content = v.replace(/\．/g, "。")
				for (var i = 0; i < _this.content.length; i++) {
					if (num >= _this.col * _this.row && num / _this.col >= _this.row) {
						num = 0
						char.push(c.join(''))
						c = []
					}
					if (!this.content[i]) continue
					if (num == 0 && (_this.content[i] === '\r' && _this.content[i + 1] == '\n')) {
						continue
					}
					if (_this.content[i] == '\n') {
						if ((num % _this.col) == 0) continue
						num += (_this.col - (num % _this.col))
					} else if (_this.content[i] == '　') {
						num += 1
					} else if (_this.content[i] == '\r') {
						continue
					} else {
						num += 1
					}
					if (num % _this.col == 1 && /\p{P}/gu.test(_this.content[i])) {
						num += 2
					}
					if (num % _this.col == 0 && /\p{P}/gu.test(_this.content[i]) && /\p{P}/gu.test(_this
							.content[i - 1])) {
						num += 3
					}
					if (num % _this.col == 1 && /\p{P}/gu.test(_this.content[i]) && /\p{P}/gu.test(_this
							.content[i - 1])) {
						num += 3
					}

					c.push(_this.content[i])
					// if (char.length == 1) {
					// 	console.log(num, this.content[i],this.col);
					// }
				}
				c.join('').replace(new RegExp('\n', 'g'), '') ? char.push(c.join('')) : null
				_this.char = char
			},

			page2(e) {
				if (!e) return
				let content = e
				let _this = this

				for (var i = 0; i < _this.replaceList.length; i++) {
					content = content.replace(new RegExp(_this.replaceList[i].key, 'gus'), _this.replaceList[i]
						.value)
				}
				// console.log(this.content);
				for (var i = 0; i < _this.replace.length; i++) {
					content = content.replace(new RegExp(_this.replace[i].key), _this.replace[i].value)
				}

				//网址处理
				content = content.replace(new RegExp('http.*\.[a-z]+', 'g'), '')
				content = content.replace(new RegExp('www.*\.[a-z]+\.[a-z]+', 'g'), '')

				for (var t = content, v = "", n = t.length, i = 0; i < n; i++) {
					var o = t.charCodeAt(i);
					o = 32 == (o = o >= 33 && o <= 126 ? o + 65248 : o) ? 12288 : o,
						v += String.fromCharCode(o)
				}
				content = v.replace(/\．/g, "。").replace(/[\r\n]+/g, '\r\n')
				if (content[0] == '\r') content = content.replace('\r\n', '')
				return content
			},
			//点击屏幕
			touch(e) {
				// var query = uni.createSelectorQuery();
				// query.select('.page' + this.currentchapters).boundingClientRect(res => {
				// 	this.scrollTop=res.top
				// }).exec()
				let _this = this
				if (this.showshezhimore) {
					this.showshezhimore = false
					// #ifdef APP
					plus.navigator.setFullscreen(true);
					//#endif
					return
				}
				if (this.showshezhispeech&&!this.speeching) {
					this.showshezhispeech = false
					// #ifdef APP
					plus.navigator.setFullscreen(true);
					//#endif
					return
				}
				if (this.showsources) {
					this.showsources = !this.showsources
					// #ifdef APP
					plus.navigator.setFullscreen(true);
					//#endif
					return
				}
				if (this.showmore) {
					this.showmore = !this.showmore
					// #ifdef APP
					plus.navigator.setFullscreen(true);
					//#endif
					return
				} else if (this.shownav) {
					this.shownav = !this.shownav
					// #ifdef APP
					plus.navigator.setFullscreen(true);
					//#endif
					return
				} else if (this.showshezhi) {
					this.showshezhi = !this.showshezhi
					// #ifdef APP
					plus.navigator.setFullscreen(true);
					//#endif
					return
				}
				if (this.type == 1) {
					if (e.detail.x > this.width * 2 / 3 && e.detail.x < this.width) {} else if (e.detail.x < this.width /
						3) {} else {
						// #ifdef APP
						plus.navigator.setFullscreen(false);
						//#endif
						this.shownav = !this.shownav
					}

					return
				}
				if (e.detail.x > this.width * 2 / 3 && e.detail.x < this.width) {
					if (this.current >= this.char.length - 1) {
						if (_this.chapters.length == _this.currentchapters + 1) {
							uni.showToast({
								icon: "none",
								title: "当前是最后一章"
							})
							return
						}
						_this.currentchapters += 1
						this.getContent(0, _this.currentchapters)
					} else {
						this.current += 1
						if (this.speeching)
							this.playAudio(this.char[this.current])
					}

				} else if (e.detail.x < this.width / 3) {
					if (this.current <= 0) {
						if (0 == _this.currentchapters) {
							uni.showToast({
								icon: "none",
								title: "当前是第一章"
							})
							return
						}
						_this.currentchapters -= 1
						this.getContent('pre', _this.currentchapters)

					} else {
						this.current -= 1
						if (this.speeching)
							this.playAudio(this.char[this.current])
					}
				} else {

					// #ifdef APP
					plus.navigator.setFullscreen(false);
					//#endif
					if (this.speeching) {
						this.showshezhispeech = !this.showshezhispeech
					} else {
						this.shownav = !this.shownav
					}
				}
			},
			//点击下一章
			nextChapter() {
				let _this = this
				if (_this.currentchapters == _this.chapters.length - 1) {
					uni.showToast({
						icon: 'none',
						title: '当前是最后一章！'
					})
					return
				}
				_this.currentchapters += 1
				if (this.type == 1) {
					this.scrollTop = 10
					this.startCurrentchapters = this.currentchapters;
					setTimeout(() => {
						this.scrollTop = 0
					}, 1000)
				}
				this.getContent(0, _this.currentchapters)
			},
			nextChapter2() {
				let _this = this
				if (_this.currentchapters == _this.chapters.length - 1) {
					uni.showToast({
						icon: 'none',
						title: '当前是最后一章！'
					})
					return
				}
				_this.currentchapters += 1
				this.getContent(0, _this.currentchapters)
			},
			//点击上一章
			preChapter() {
				let _this = this
				if (_this.currentchapters == 0) {
					uni.showToast({
						icon: 'none',
						title: '当前是第一章！'
					})
					return
				}

				_this.currentchapters -= 1
				if (this.type == 1) {
					this.scrollTop = 0
					this.scrollTop = 10
					this.startCurrentchapters = this.currentchapters;
					setTimeout(() => {
						this.scrollTop = 0
					}, 1000)
				}
				this.getContent(0, _this.currentchapters)
			},

			//展示目录
			showMulu() {
				let p = this.currentchapters + 1
				if (this.reverse) p = this.chapters.length - p
				this.chapter_y = this.RpxToPx(100) * p - parseInt((this.height - 76 -
					parseInt(this
						.RpxToPx(this.statusBarHeight))) / 2)
				this.showmulu = true
			},

			//目录选章
			selectChapter(index) {
				let _this = this
				if (this.currentchapters == index) return
				this.currentchapters = index
				if (this.type == 1) {
					this.scrollTop = 10
					this.startCurrentchapters = index;
					setTimeout(() => {
						this.scrollTop = 0
					}, 1000)
				}
				this.showmulu = false
				this.shownav = false
				// #ifdef APP
				plus.navigator.setFullscreen(true);
				//#endif
				this.getContent(0, _this.currentchapters)
			},

			//章节列表页面滑动
			chapterScroll(e) {
				if (~~(e.detail.scrollTop / this.RpxToPx(100)) + this.containSize >= this.chapters.length) return
				this.startIndex = ~~(e.detail.scrollTop / this.RpxToPx(100))
			},
			chapterScroll2(e) {
				clearTimeout(this.t)
				this.t = setTimeout(() => {
					this.scrollTop = e.detail.scrollTop
				}, 100)
			}
		}
	}
</script>
<style scoped lang="less">
	//夜间模式
	.container.dark {
		.mulu {
			/deep/.uni-popup__wrapper {
				background-color: var(--nav_color) !important;
			}
		}

		/deep/.uni-slider-handle {
			background-color: #35a9fc !important;
			box-shadow: none;
		}

		/deep/.uni-slider-track {
			background-color: #35a9fc !important;
			box-shadow: 10rpx 10rpx 15rpx var(--color1),
				-10rpx -10rpx 15rpx var(--color2);
		}

		/deep/ .segmented-control__text:not(.segmented-control__item--text) span {
			color: var(--color-main)
		}

		.shezhi-a {
			color: white;
		}

		.shezhi-b {
			color: white;
		}

	}

	.container {
		height: 100vh;
		position: relative;
		overflow: hidden;
		transition: transform .4s ease;
		width: 100vw;

		/deep/ .uniui-star-filled {
			color: #ff5860 !important;
		}

		.show.shezhi-more {
			transform: translate(0, 0);
		}

		.shezhi-more {
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			position: absolute;
			height: 550rpx;
			width: 100vw;
			bottom: 0;
			background: var(--background);
			box-shadow: 0rpx -10rpx 15rpx var(--color2);
			z-index: 11;
			transition: transform .4s ease;
			transform: translate(0, 570rpx);

			.item {
				background-color: var(--background);
				box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
				padding: 10rpx 30rpx;
				border-radius: 999px;
				margin: 20rpx 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.show.addNote {
			transform: translate(0, 0);
		}

		.addNote {
			position: absolute;
			bottom: 420rpx;
			padding: 10rpx 20rpx;
			padding-right: 30rpx;
			background-color: var(--background);
			box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
			z-index: 10;
			font-size: 32rpx;
			border-bottom-right-radius: 999px;
			border-top-right-radius: 999px;
			transform: translate(-220rpx, 0);
			transition: transform .4s ease;
		}

		.show.add {
			transform: translate(0, 0);
		}

		.show.speech {
			transform: translate(0, 0);
		}

		.speech {
			position: absolute;
			bottom: 550rpx;
			left: 30rpx;
			width: 100rpx;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			transform: translate(-170rpx, 0);
			background-color: var(--background);
			box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
			border-radius: 50%;
			transition: transform .4s ease;
			z-index: 10;
		}

		.add {
			position: absolute;
			bottom: 400rpx;
			right: 30rpx;
			width: 100rpx;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			transform: translate(170rpx, 0);
			background-color: var(--background);
			box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
			border-radius: 50%;
			transition: transform .4s ease;
			z-index: 10;
		}

		.sources.show {
			transform: translate(0);
		}

		.sources {
			position: absolute;
			bottom: 0;
			z-index: 11;
			height: 70vh;
			width: 100vw;
			background: var(--background);
			box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			transform: translate(0, 70vh);
			transition: transform .4s ease;

			.source.active {
				color: #007aff;
				border: 2rpx dashed #007aff;
			}

			.source {
				border: 2rpx dashed rgba(0, 0, 0, 0);
				margin: 20rpx 40rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				background-color: var(--background);
				box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);

				.host {
					padding: 10rpx 0;
					font-size: 24rpx;
				}
			}
		}

		.mask {
			width: 100vw;
			height: 100%;
			z-index: 998;
			position: absolute;
			background: rgba(0, 0, 0, .4);
		}

		.show.more {
			transform: translate(0, 0);
		}

		.more {
			height: 70vh;
			z-index: 11;
			position: absolute;
			bottom: 0;
			width: 100vw;
			transform: translate(0, 71vh);
			transition: transform .4s ease;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			background-color: var(--background);
			box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);

			.color-item {
				display: flex;
				padding: 40rpx 20rpx;
				font-size: 28rpx;

				.left.active {
					border: 1px dashed #2979ff;
				}

				.left {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					flex: 2;
					border-radius: 10rpx;
				}

				.right {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					flex: 2;
				}

				.active.action {
					background: #2979ff;
				}

				.action {
					background: white;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					flex: 1;
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}
			}

			.font-box {
				display: flex;
				padding: 30rpx;
				flex-direction: column;
				box-sizing: border-box;

				.font-item.active {
					color: #007aff !important;
					border: 2rpx dashed #007aff;
				}

				.font-item {
					border: 2rpx dashed rgba(0, 0, 0, 0);
					font-size: 30rpx;
					margin: 20rpx 40rpx;
					margin-top: 0;
					padding: 40rpx;
					border-radius: 10rpx;
					background-color: var(--background);
					box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
				}
			}
		}

		.top-info {
			position: absolute;
			width: 100vw;
			top: var(--status-bar-height);
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: end;
			box-sizing: border-box;
			padding: 0 40rpx;

			.time {
				position: absolute;
				right: 40rpx;
			}
		}

		.bottom-info {
			position: absolute;
			width: 100vw;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			height: 80rpx;
			color: var(--color-second);

			.left {
				max-width: 70%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.shezhiSpeech.show {
			transform: translate(0, 0);
		}

		.shezhiSpeech {
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			position: absolute;
			height: 650rpx;
			width: 100vw;
			bottom: 0;
			background: var(--background);
			box-shadow: 0rpx -10rpx 15rpx var(--color2);
			z-index: 11;
			transition: transform .4s ease;
			transform: translate(0, 670rpx);

			.shezhi-d {
				margin-top: 26rpx;
				height: 300rpx;
				width: 100vw;
				box-sizing: border-box;
				padding: 0 40rpx;
				overflow-y: scroll;
			}

			.shezhi-c {
				margin: 10rpx 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.left {
					width: 40vw;
					background-color: var(--background);
					box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
					text-align: center;
					border-radius: 999px;
				}

				.middle {
					margin: 0 40rpx;
					width: 40vw;
					background-color: var(--background);
					box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
					text-align: center;
					border-radius: 999px;
				}

				.right {
					width: 40vw;
					background-color: var(--background);
					box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
					text-align: center;
					border-radius: 999px;
				}
			}

			.shezhi-b {
				display: flex;
				align-items: center;

				.button {
					font-size: 24rpx;
					margin-right: 20rpx;
					padding: 0 20rpx;
					line-height: 50rpx;
					border-radius: 999px;
					border: 2rpx blue solid;
				}

				.left {
					flex: 1;
					display: flex;
					position: relative;
					align-items: center;

					.label-left {
						z-index: 2;
						left: 25rpx;
						font-size: 30rpx;
						position: absolute;
						height: 30rpx;
						width: 30rpx;
						background-repeat: no-repeat;
						background-position: center;
					}

					.label-right {
						z-index: 1;
						right: 25rpx;
						font-size: 36rpx;
						position: absolute;
						height: 38rpx;
						width: 38rpx;
						background-repeat: no-repeat;
						background-position: center;
					}
				}
			}

			.shezhi-a {
				display: flex;
				align-items: center;

				.label-left {
					z-index: 2;
					left: 25rpx;
					font-size: 30rpx;
					position: absolute;
					height: 30rpx;
					width: 30rpx;
					background-repeat: no-repeat;
					background-position: center;
				}

				.label-right {
					z-index: 1;
					font-size: 36rpx;
					right: 25rpx;
					position: absolute;
					height: 38rpx;
					width: 38rpx;
					background-repeat: no-repeat;
					background-position: center;
				}
			}
		}


		.shezhi.show {
			transform: translate(0, 0);
		}

		.shezhi {
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			position: absolute;
			height: 550rpx;
			width: 100vw;
			bottom: 0;
			background: var(--background);
			box-shadow: 0rpx -10rpx 15rpx var(--color2);
			z-index: 11;
			transition: transform .4s ease;
			transform: translate(0, 570rpx);

			.shezhi-e {
				margin-top: 20rpx;
				height: 70rpx;
				display: flex;

				.item.active {
					background-color: #35a9fc;
				}

				.item {
					flex: 1;
					line-height: 70rpx;
					text-align: center;
					margin: 0 30rpx;
					font-size: 30rpx;
					border-radius: 8rpx;
					background-color: var(--background);
					box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);

				}
			}

			.shezhi-d {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 94rpx;
				padding: 0 30rpx;

				margin-top: 10rpx;

				.action {
					font-size: 25rpx;
					border-radius: 999px;
					padding: 20rpx 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: var(--background);
					box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);


				}

				.left.active {
					.iconfont {
						background-color: #35a9fc;
					}
				}

				.left {
					height: 75rpx;
					width: 100rpx;
					display: flex;
					border-radius: 20rpx;
					justify-content: center;
					align-items: center;

					.iconfont {
						height: 75rpx;
						width: 75rpx;
						font-size: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-repeat: no-repeat;
						background-position: center;
						border-radius: 999px;
						background-color: var(--background);
						box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);

					}
				}

			}

			.shezhi-c {
				display: flex;
				align-items: center;
				margin: 0 30rpx;
				padding: 20rpx 0;
				font-size: 24rpx;
				justify-content: space-between;
				border-bottom: 1rpx solid rgba(0, 0, 0, .5);

				.color {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: black;
					border: 2rpx solid rgba(0, 0, 0, 0);
				}

				.color.active {
					border-radius: 50%;
					border: 2rpx solid #007aff;
				}

				.a {
					background-color: rgb(248, 248, 248);
				}

				.b {
					background-color: rgb(223, 234, 226);
				}

				.c {
					background-color: rgb(241, 231, 119);
				}

				.d {
					background-color: rgb(223, 216, 218);
				}

				.e {
					background-color: rgb(174, 205, 226);
				}

				.action {
					line-height: 50rpx;
					border-radius: 999px;
					padding: 0 20rpx;

					background-color: var(--background);
					box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
				}
			}

			.shezhi-b {
				display: flex;
				align-items: center;

				.button {
					font-size: 24rpx;
					margin-right: 20rpx;
					padding: 0 20rpx;
					line-height: 50rpx;
					border-radius: 999px;
					border: 2rpx blue solid;
				}

				.left {
					flex: 1;
					display: flex;
					position: relative;
					align-items: center;

					.label-left {
						z-index: 2;
						left: 25rpx;
						font-size: 30rpx;
						position: absolute;
						height: 30rpx;
						width: 30rpx;
						background-repeat: no-repeat;
						background-position: center;
					}

					.label-right {
						z-index: 1;
						right: 25rpx;
						font-size: 36rpx;
						position: absolute;
						height: 38rpx;
						width: 38rpx;
						background-repeat: no-repeat;
						background-position: center;
					}
				}
			}

			.shezhi-a {
				display: flex;
				align-items: center;

				.label-left {
					z-index: 2;
					left: 25rpx;
					font-size: 30rpx;
					position: absolute;
					height: 30rpx;
					width: 30rpx;
					background-repeat: no-repeat;
					background-position: center;
				}

				.label-right {
					z-index: 1;
					font-size: 36rpx;
					right: 25rpx;
					position: absolute;
					height: 38rpx;
					width: 38rpx;
					background-repeat: no-repeat;
					background-position: center;
				}
			}
		}

		// .show.mulu {
		// 	transform: translate(0, 0);
		// }


		.mulu {

			/deep/ .uni-popup__wrapper {
				width: 70vw;
				padding-top: var(--status-bar-height);
				background-color: var(--background) !important;
			}

			.reverse {
				padding: 0 20px;
				background-color: var(--background);
				box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
				height: 30px;
				line-height: 30px;
				border-radius: 999px;
			}

			.empty {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.scroll-mulu {

				/deep/.uni-scroll-view-content {
					padding-top: var(--topBlankFill) !important;
					padding-bottom: var(--bottomBlankFill) !important;
				}

				.chapter-name {
					line-height: 100rpx;
					height: 100rpx;
					padding-left: 20rpx;
					font-size: 28rpx;
					display: flex;

					.name {
						width: 90%;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.icon-chenggong {
						color: #67C23A;
					}
				}

				.chapter-name.active {
					color: #007aff;
				}
			}

		}

		.top.show {
			transform: translate(0, 0) !important;
		}

		.bottom.show {
			transform: translate(0, 0);
		}

		.top {
			padding-top: var(--status-bar-height);
			width: 100vw;
			position: absolute;
			height: 400rpx;
			z-index: 10;
			top: 0;

			transition: transform .4s ease;
			background: var(--background);
			box-shadow: 0rpx 10rpx 15rpx var(--color1);

			.url {
				height: 50rpx;
				line-height: 50rpx;
				border-top: 1rpx solid black;
				font-size: 24rpx;
				padding-left: 10rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.top-top {
				display: flex;
				align-items: center;
				justify-content: space-between;


				.left {
					padding-left: 20rpx;
					max-width: 400rpx;
					height: 100rpx;
					display: flex;
					align-items: center;

					.name {
						padding-left: 20rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.iconfont {
						font-size: 50rpx;
						background-color: var(--background);
						box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
						border-radius: 99px;
						padding: 10rpx;
					}

				}

				.right {
					width: 200rpx;
					height: 70rpx;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: var(--background);
					box-shadow: 10rpx 10rpx 15rpx var(--color1),
						-10rpx -10rpx 15rpx var(--color2);
					border-radius: 9999px;
					display: flex;
					justify-content: space-around;

					.iconfont {
						font-size: 50rpx;
					}
				}
			}

			.icon {
				width: 50rpx;
				height: 50rpx;
				background-repeat: no-repeat;
				background-position: center;
			}



		}

		.bottom {
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			width: 100vw;
			position: absolute;
			height: 350rpx;
			z-index: 10;
			bottom: 0;
			transition: transform .4s ease;
			transform: translate(0, 380rpx);
			background: var(--background);
			box-shadow: 0rpx -10rpx 15rpx var(--color2);


			.bottom-top {
				height: 150rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				transition: all 0s;

				.action {
					;
					padding: 20rpx;
					background-color: var(--background);
					border-radius: 999px;
					box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
				}

				.action:nth-child(1) {
					margin-left: 10rpx;
				}

				.action:last-child {
					margin-right: 10rpx;
				}
			}

			.bottom-bottom {
				margin: 0 20rpx;
				display: flex;
				height: 200rpx;
				border-top: 1rpx solid rgba(0, 0, 0, .3);

				transition: all 0s;

				.item {
					display: flex;
					flex: 1;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.box {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						height: 100rpx;
						width: 100rpx;
						border-radius: 999px;
						background: var(--background);
						box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);

						.iconfont {
							font-size: 40rpx;
						}
					}

					.title {
						font-size: 24rpx;
					}
				}

			}
		}

	}

	.swiper-item {
		height: 100%;
		padding: 20rpx 30rpx;
		padding-bottom: env(safe-area-inset-bottom);
		white-space: pre-wrap;
		box-sizing: border-box;
		word-break: break-all;
		word-wrap: break-word;
		font-family: 'currentFont';

		.title {
			font-weight: bolder;
		}
	}

	.pre {
		display: none;
	}
</style>
